<template>
    <div class="content" v-loading="loading">
        <div class="cloud" v-for="(items,index) in list" :key="index">
            <p><b>{{index}}</b></p>
            <ul>
                <li v-for="item in items" :key="item.id">
                    <div @click="$router.push('/spm/detail/'+item.id)">
                        <div class="image">
                            <!--<img :src="item.icon" alt="">-->
                            <el-image
                                class="img"
                                :src="item.iconInfo.path"
                                v-if="item.iconInfo"
                                fit="scale-down">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </div>
                        <div class="li-l">
                            <p class="title-t"><b>{{item.name}}</b></p>
                            <p class="title-b">{{item.description}}</p>
                        </div>
                    </div>

<!--                    <div class="car" @click="addCar($event,item)" v-if="user.bmanager!=2&&item.type!=2">-->
                    <div class="car" @click="addCar($event,item)" v-if="getAuth('btnAddSql')&&item.type!=2">
                        <i class="iconfont icon-cart"></i>
                    </div>
                </li>
            </ul>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        data() {
            return {
                list: [],
                loading: false,
                id: ''
            }
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        watch: {
            // 监听相同路由下参数变化的时候，从而实现异步刷新
            '$route'(to, from) {
                if (to.query.id !== from.query.id) {
                    this.id = to.query.id
                    this.getData()
                }
            }
        },
        mounted() {
            this.id = this.$route.query.id
            this.getData()
        },
        methods: {
            addCar(event, item) {
                event.preventDefault()
                this.loading = true
                this.$http.post('/gsOrder/addOrderItem', {
                    resId: item.id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.$message.success({
                            message: '添加成功',
                            showClose: true
                        })
                    }
                })
                return false
            },
            getData() {
                this.loading = true
                this.$http.get('/gsRes/listDataMap', {
                    category: this.id || ''
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.list = result.data
                        this.$method.updateView()
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            getAuth(auth) {
                return this.user && this.user.authTree && this.user.authTree[auth]
            }
        },
        component: {}
    }
</script>

<style scoped lang="less">
    .content {
        padding-top: .3rem;
    }

    .cloud {
        width: 12rem;
        margin: 0 auto;
        margin-bottom: 0.3rem;
        /*height: 10rem;*/
        background-color: #fff;
        padding-top: 0.6rem;
        padding-bottom: .01rem;

        p {
            font-size: 0.26rem;
            text-align: center;
        }

        li {
            margin-top: .3rem;
            height: 1.4rem;
            padding-top: 0.43rem;
            cursor: pointer;
            &:hover {
                box-shadow: 0 0 10px 1px #f5f5f5;
            }

            p {
                text-align: left;
            }

            .image {
                /*margin-top: 0.1rem;*/
                width: .7rem;
                height: .7rem;
                /*background-color: pink;*/
                float: left;
                margin-left: .9rem;
                margin-right: .2rem;

                /*img {*/
                    /*width: .7rem;*/
                    /*height: .7rem;*/
                /*}*/
            }

            .li-l {

                float: left;
                width: 8.64rem;

                .title-t {
                    font-size: 0.2rem;
                }

                .title-b {
                    font-size: 0.16rem;
                    color: #999;
                    margin-top: 0.16rem;
                }
            }

            .car {
                float: right;
                width: 0.56rem;
                height: 0.56rem;
                border: 0.01rem solid #1597fc;
                border-radius: 50%;
                text-align: center;
                margin-top: 0.1rem;
                margin-right: 0.8rem;
                cursor: pointer;
                &:hover {
                    background-color: #4995F4;

                    i {
                        color: #fff;
                    }
                }

                i {
                    line-height: 0.56rem;
                    font-size: 0.20rem;
                    color: #1597fc;
                }
            }

        }
    }
</style>
